<template>
  <image class="top_bg_image" src="/static/topbg.png" mode="scaleToFill" />
  <view class="top_view">
    <view class="top_tools">
      <image class="top_positionimg" src="~@/static/position.png" mode="aspectFit"></image>
      <text class="top_address">广州</text>
      <image class="top_arrow_down" src="../../static/arrow_down.png" mode="aspectFit"></image>
      <view class="top_search">
        <image class="top_search_img" src="../../static/search.png" mode="aspectFit"></image>
        <input class="top_search_input" type="text" placeholder="找明星、演出、场馆" placeholder-style="color:#fff">
      </view>
    </view>

    <view class="top_banner">
      <swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
        :duration="duration" indicator-color="#969696" indicator-active-color="#ffffff">
        <swiper-item>
          <image class="banner_img" src="../../static/material/banner_img.png" mode="scaleToFill"></image>
        </swiper-item>
        <swiper-item>
          <image class="banner_img" src="../../static/material/banner_img.png" mode="scaleToFill"></image>
        </swiper-item>
        <swiper-item>
          <image class="banner_img" src="../../static/material/banner_img.png" mode="scaleToFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <view class="top_grid">
      <view class="top_grid_item" v-for="item in grids">
        <image class="grid_item_img" :src="item.img" mode="scaleToFill"></image>
        <view class="grid_item_txt">{{item.text}}</view>
      </view>
    </view>
  </view>

  <view class="title_group">
    <view class="group">
      <image class="group_logo" src="/static/home/fire.png" mode="scaleToFill"></image>
      <view class="group_txt">正在热卖</view>
    </view>
    <view @click="gotoPage()" class="">
      <image class="group_arrow_right" src="/static/home/arrow_right.png" mode="aspectFit"></image>
      <view class="group_txt_right">更多</view>
    </view>
  </view>

  <view class="now_view">
    <scroll-view scroll-x="true" :show-scrollbar="false">
      <view @click="gotoGoods()" v-for="(item , index) in material" class="ticket-item"
        :style="{'margin-left': (index == 0 ? '5%' : '0')}">
        <view class="ticket_img">
          <image class="ticket_img_image" :src="item.img" mode="aspectFill" />
          <view class="type_text">
            <text>{{item.text}}</text>
          </view>
        </view>
        <text class="ticket_title">{{item.title}}</text>
      </view>
    </scroll-view>
  </view>

  <view class="title_group">
    <view class="group">
      <image class="group_logo" src="/static/home/waiting.png" mode="scaleToFill"></image>
      <text class="group_txt">即将开售</text>
    </view>
    <view @click="gotoPage()" class="">
      <image class="group_arrow_right" src="/static/home/arrow_right.png" mode="aspectFit"></image>
      <text class="group_txt_right">更多</text>
    </view>
  </view>
  <view class="now_view">
    <scroll-view scroll-x="true" :show-scrollbar="false">
      <view @click="gotoGoods()" v-for="(item , index) in material" class="ticket-item"
        :style="{'margin-left': (index == 0 ? '5%' : '0')}">
        <view class="ticket_img">
          <image class="ticket_img_image" :src="item.img" mode="aspectFill" />
          <view class="type_text">
            <text>{{item.text}}</text>
          </view>
          <view class="day_text">
            <text class="day_text_color">{{item.day}}天</text><text>后开售</text>
          </view>
        </view>
        <text class="ticket_title">{{item.title}}</text>
      </view>
    </scroll-view>
  </view>


  <view class="title_group">
    <view class="group">
      <image class="group_logo" src="/static/home/recommend.png" mode="scaleToFill"></image>
      <text class="group_txt">精选推荐</text>
    </view>
  </view>

  <recommend v-for="(item,index) in recommend" :item="item"></recommend>

  <view style="width: 100%;height: 40px;">
  </view>

</template>

<script>
  import recommend from "/component/recommend.vue"
  export default {
    components: {
      recommend
    },
    data() {
      return {
        grids: [{
          img: "../../static/home/ych.png",
          text: "演唱会",
        }, {
          img: "../../static/home/yyj.png",
          text: "音乐节",
        }, {
          img: "../../static/home/jcyc.png",
          text: "剧场演出",
        }, {
          img: "../../static/home/tyss.png",
          text: "体育赛事",
        }, {
          img: "../../static/home/jqzh.png",
          text: "景区展会",
        }, ],
        material: [{
          img: "/static/material/m1.png",
          title: "2023珠海草莓音乐节莓音乐【9月29日】",
          text: "演唱会",
          day: 1,
        }, {
          img: "/static/material/m2.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "音乐会",
          day: 1,
        }, {
          img: "/static/material/m3.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "剧场演出",
          day: 2,
        }, {
          img: "/static/material/m4.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "演唱会",
          day: 2,
        }, {
          img: "/static/material/m4.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "演唱会",
          day: 3,
        }, {
          img: "/static/material/m4.png",
          title: "2023珠海草莓音乐节【9月29日】",
          text: "演唱会",
          day: 4,
        }, ],
        recommend: [{
          src: "/static/material/m5.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m4.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m3.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }, {
          src: "/static/material/m2.png",
          title: '薛之谦2023中国巡演-广州站薛之谦2023中国巡演',
          address: '广州· 正佳广场',
          time: '2023.09.13 周日 18:00',
          tyle: '#演唱会',
          money: 99,
        }],
        search: "",
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      }
    },
    methods: {
      gotoPage() {
        uni.navigateTo({
          url: '/pages/index/selling'
        })
      },
      gotoGoods() {
        uni.navigateTo({
          url: '/pages/index/goods'
        })
      }
    },
    onLoad() {
      // uni.navigateTo({
      //   url: '/pages/index/order'
      // })
    }
  }
</script>

<style scoped lang="scss">
  .top_bg_image {
    width: 100%;
    height: 300px;
    // position: absolute;
    display: block;
  }

  .top_view {
    // background-image: url('../../static/topbg.png');
    // background-size: cover;
    width: 100%;
    height: 300px;
    margin-top: -300px;

    .top_tools {
      width: 100%;
      height: 32px;
      padding-top: 40px;

      .top_positionimg {
        float: left;
        width: 12px;
        height: 32px;
        margin-left: 20px;
      }

      .top_address {
        margin-left: 5px;
        float: left;
        width: 30px;
        height: 17px;
        line-height: 32px;
        font-family: PingFang SC, PingFang SC-600;
        font-weight: 600;
        font-size: 12px;
        color: black;
      }

      .top_arrow_down {
        float: left;
        width: 10px;
        height: 32px;
        margin-left: 5px;
      }

      .top_search {
        width: 200px;
        height: 32px;
        border-radius: 16px;
        background-color: rgba(0, 0, 0, 0.2);
        float: left;
        margin: 0 auto;
        margin-left: 10px;
        padding: 0;
        display: flex;
        // justify-content: center;
        align-items: center;

        .top_search_img {
          width: 14px;
          height: 14px;
          margin-left: 10px;
        }

        .top_search_input {
          font-size: 12px;
          margin: 0px 10px;
          color: white;
        }
      }
    }

    .top_banner {
      width: 90%;
      margin: 20px 5% 10px 5%;
      height: 100px;

      .swiper {
        height: 100px;
      }

      .swiper-item {
        display: block;
        text-align: center;
      }

      .banner_img {
        height: 100px;
        width: 100%;
      }
    }

    .top_grid {
      width: 90%;
      margin: 20px 5% 10px 5%;
      height: 120px;
      display: flex;
      justify-content: space-between;

      .top_grid_item {
        width: 52px;
        height: 100px;

        .grid_item_img {
          width: 100%;
          height: 52px;
        }

        .grid_item_txt {
          width: 100%;
          height: 30px;
          line-height: 30px;
          font-size: 13px;
          font-weight: 400;
          text-align: center;
          font-family: PingFang SC, PingFang SC-400;
        }
      }
    }
  }

  .title_group {
    width: 90%;
    height: 25px;
    margin: 30px 5% 20px 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .group {
      display: flex;
      justify-content: left;

      .group_logo {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        // float: left;
      }

      .group_txt {
        height: 25px;
        font-size: 18px;
        font-weight: 600;
        color: #333333;
        line-height: 25px;
        margin-left: 10px;
        // float: left;
      }
    }

    .group_txt_right {
      float: right;
      width: 40px;
      height: 25px;
      line-height: 25px;
      font-size: 12px;
      font-weight: 500;
      text-align: right;
      color: #9b9b9b;
      margin-right: 5px;
    }

    .group_arrow_right {
      float: right;
      width: 10px;
      height: 25px;
    }
  }

  scroll-view ::-webkit-scrollbar {
    width: 0;
    height: 0;
    background-color: transparent;
  }

  .now_view {
    width: 100%;
    height: 210px;
    white-space: nowrap;
    // padding: 0 5%;
    margin-top: 20px;

    .ticket-item {
      display: inline-block;
      margin-right: 10px;
      height: 210px;
      width: 100px;

      .first_ticket {
        margin-left: 5%;
      }

      .ticket_img {
        background-size: cover;
        width: 100px;
        height: 160px;
        border-radius: 10px;

        .ticket_img_image {
          width: 100px;
          height: 160px;
          border-radius: 5px;
          position: absolute;
        }
      }

      .type_text {
        color: #fff;
        font-size: 13px;
        text-align: center;
        width: 60px;
        height: 25px;
        line-height: 25px;
        border-radius: 5px;
        background-color: rgba(0, 0, 0, 0.6);
        position: absolute;
        margin: 10px;
      }

      .day_text {
        color: #fff;
        text-align: center;
        width: 100px;
        height: 25px;
        line-height: 25px;
        font-size: 13px;
        background-color: rgba(0, 0, 0, 0.8);
        position: absolute;
        margin-top: 135px;
        border-radius: 5px;

        .day_text_color {
          color: #FD5359;
        }
      }

      .ticket_title {
        height: 40px;
        // line-height: 40px;
        font-size: 14px;
        font-weight: 400;
        text-align: LEFT;
        color: #000000;
        margin-top: 10px;

        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .ticket_title2 {
        width: 100%;
        height: 40px;
        // line-height: 40px;
        font-size: 15px;
        font-weight: 400;
        // text-align: LEFT;
        color: #000000;
        margin-top: 10px;
        word-wrap: break-word;

      }
    }
  }
</style>